<template>
  <div class="statistics-card">
    <h4 class="card-title">{{ title }}</h4>
    <div class="statistics-list">
      <div
        v-for="(stat, index) in statistics"
        :key="index"
        class="statistic-item"
      >
        <span class="statistic-label">{{ stat.label }}：</span>
        <span class="statistic-value">{{ stat.value }}{{ stat.unit }}</span>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
interface Statistic {
  label: string;
  value: string | number;
  unit?: string;
}

defineProps<{
  title: string;
  statistics: Statistic[];
}>();
</script>

<style scoped>
.statistics-card {
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 8px;
}

.card-title {
  font-weight: 500;
  color: #111827;
  margin-bottom: 8px;
}

.statistics-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.statistic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-label {
  color: #4b5563;
}

.statistic-value {
  font-weight: 500;
  color: #111827;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .statistics-card {
    padding: 12px;
  }

  .statistics-list {
    gap: 6px;
  }

  .statistic-item {
    font-size: 14px;
  }
}
</style>
